/**
 * 判断是否为空
 */
export function validatenull(val) {
  if (typeof val === 'boolean') {
    return false;
  }
  if (typeof val === 'number') {
    return false;
  }
  if (val instanceof Array) {
    if (val.length === 0) return true;
  } else if (val instanceof Object) {
    if (JSON.stringify(val) === '{}') return true;
  } else {
    if (val === 'null' || val === null || val === 'undefined' || val === undefined || val === '') return true;
    return false;
  }
  return false;
}

export function getProperty(value, unit = "", round = false, fixed = false, emptyText = '-', mustN = false) {
  if (!validatenull(value)) {
    if (!isNaN(value)) {
      if (round) {
        value = Math.round(Number(value));
      } else if (fixed) {
        value = Number(value).toFixed(fixed);
      }
    }
    if(mustN) {
      return Number(value)
    }
    return value + unit;
  } else {
    return emptyText;
  }
}

export function getSkddEcOption(
  xData,
  inData,
  inFData,
  outData,
  outFData,
  historyWl,
  featureWl,
  historyRain,
  featureRain,
  xuanxianWl,
  fanghongWl,
  currentIndex,
  isWhite = false,
) {
  const wlData = [xuanxianWl, fanghongWl, ...historyWl, ...featureWl].filter((item) => !!item);
  let min = parseInt(Math.min(...wlData) / 10, 10) * 10;

  let inColor = '#9446FF',
    outColor = '#B7FC54',
    wlColor = '#20BCFF',
    historyRainColor = '#1892FA',
    featureRainColor = '#27D526';
  const inName = '实测入流',
    inFName = '预报入流',
    outName = '实测出流',
    outFName = '预报出流',
    historyWlName = '实测水位',
    featureWlName = '预报水位',
    historyRainName = '实测降雨',
    featureRainName = '预报降雨';
  const wlTzs = [
    { name: '汛限水位', value: xuanxianWl, color: '#FFE531', position: 'bottom' },
    { name: '防洪高水位', value: fanghongWl, color: '#FF5349', position: 'top' },
  ];
  const filterWlTzs = wlTzs.filter((item) => !validatenull(item.value));
  const wlTzSeries = filterWlTzs.map((item) => ({
    name: item.name,
    yAxisIndex: 1,
    xAxisIndex: 1,
    type: 'line',
    symbol: 'none',
    itemStyle: {
      color: item.color,
    },
    silent: true,
    lineStyle: {
      type: [5, 2],
      width: 1,
    },
    emphasis: {
      lineStyle: {
        type: [5, 2],
        width: 1,
      },
    },
    markPoint: {
      data: [
        {
          type: 'average',
          valueIndex: 0,
        },
      ],
      symbol: 'circle',
      symbolSize: 1,
      label: {
        position: item.position,
        fontSize: 12,
        color: item.color,
        formatter() {
          return `${item.name}：${item.value}m`;
        },
      },
    },
    data: xData.map(() => item.value),
  }));
  const wlTzLegends = filterWlTzs.map((item) => ({
    name: item.name,
    itemStyle: {
      borderColor: item.color,
      borderType: 'dotted',
    },
  }));
  const currentTimeMarkLine = {
    symbol: 'none',
    lineStyle: {
      color: isWhite ? '#555' : 'rgba(255,255,255,0.4)',
    },
    label: {
      show: false,
    },
    silent: true,
    data: [
      {
        name: '当前时间',
        valueIndex: 0,
        xAxis: currentIndex,
      },
    ],
  };
  let gap = 45,
    xAsisDates = new Set();
  const xMap = xData.map((value) => {
    const date = value.slice(5, 10);
    const time = value.slice(11, 16);
    if (xAsisDates.has(date)) {
      return time;
    } else {
      xAsisDates.add(date);
      return date;
    }
  });
  return {
    title: xData.length
      ? undefined
      : {
          text: '暂无数据',
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 18,
          },
        },
    legend: [
      {
        left: 'center',
        bottom: 0,
        icon: 'roundRect',
        itemWidth: 31,
        itemHeight: 0,
        // itemGap: 24,
        textStyle: {
          color: '#979797',
          fontSize: 14,
        },
        itemStyle: {
          borderWidth: 3,
        },
        inactiveBorderWidth: 3,
        data: [
          {
            name: inName,
            itemStyle: {
              borderColor: inColor,
            },
          },
          {
            name: inFName,
            itemStyle: {
              borderColor: inColor,
              borderType: 'dotted',
            },
          },
          {
            name: outName,
            itemStyle: {
              borderColor: outColor,
            },
          },
          {
            name: outFName,
            itemStyle: {
              borderColor: outColor,
              borderType: 'dotted',
            },
          },
          {
            name: historyWlName,
            itemStyle: {
              borderColor: wlColor,
            },
          },
          {
            name: featureWlName,
            itemStyle: {
              borderColor: wlColor,
              borderType: 'dotted',
            },
          },
          {
            name: historyRainName,
            itemStyle: {
              borderColor: historyRainColor,
              borderWidth: 10,
            },
          },
          {
            name: featureRainName,
            itemStyle: {
              borderColor: featureRainColor,
              borderWidth: 10,
            },
          },
          ...wlTzLegends,
        ],
      },
    ],
    axisPointer: {
      link: [{ xAxisIndex: 'all' }],
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(91,91,91,0.6)',
        },
      },
      backgroundColor: '#5B5B5B',
      borderWidth: 0,
      textStyle: {
        color: '#fff',
        fontSize: 14,
      },
      formatter(params) {
        const time = params[0].name.slice(0, 16);
        const p = params.find(
          (item) =>
            (item.seriesName === historyRainName || item.seriesName === featureRainName) && item.value !== undefined,
        );
        const wl = params.find(
          (item) =>
            (item.seriesName === historyWlName || item.seriesName === featureWlName) && item.value !== undefined,
        );
        const inFl = params.find(
          (item) => (item.seriesName === inName || item.seriesName === inFName) && item.value !== undefined,
        );
        const outFl = params.find(
          (item) => (item.seriesName === outName || item.seriesName === outFName) && item.value !== undefined,
        );
        const htmls = [];
        p &&
          htmls.push(
            `<div>降雨：<span style="color:${p.seriesName === historyRainName ? historyRainColor : featureRainColor};">${p.value}mm</span></div>`,
          );
        wl && htmls.push(`<div>水位：<span style="color:${wlColor};">${wl.value}m</span></div>`);
        inFl && htmls.push(`<div>入流：<span style="color:${inColor};">${inFl.value}m³/s</span></div>`);
        outFl && htmls.push(`<div>出流：<span style="color:${outColor};">${outFl.value}m³/s</span></div>`);
        return `<div>${time}</div>${htmls.join('')}`;
      },
    },
    grid: [
      {
        top: '70%',
        left: gap,
        right: gap,
        bottom: '12%',
      },
      {
        top: '30%',
        left: gap,
        right: gap,
        bottom: '30%',
      },
      {
        top: '1%',
        left: gap,
        right: gap,
        bottom: '70%',
      },
    ],
    xAxis: [
      {
        axisLine: {
          lineStyle: {
            color: 'rgba(110,110,110,0.33)',
            width: 2,
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#fff',
          formatter(value, index) {
            return xMap[index];
          },
          interval(index) {
            return (xMap[index] && xMap[index].includes('-')) || xMap[index] === '12:00';
          },
          margin: 12,
        },
        data: xData,
      },
      {
        gridIndex: 1,
        show: false,
        data: xData,
      },
      {
        gridIndex: 2,
        show: false,
        data: xData,
      },
    ],
    yAxis: [
      {
        position: 'right',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#5B5B5B',
            width: 1,
          },
        },
        axisTick: {
          show: true,
        },
        axisLabel: {
          color: '#98c1ff',
        },
      },
      {
        gridIndex: 1,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#5B5B5B',
            width: 1,
          },
        },
        axisTick: {
          show: true,
        },
        axisLabel: {
          color: '#98c1ff',
        },
        min,
      },
      {
        gridIndex: 2,
        position: 'right',
        inverse: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#5B5B5B',
            width: 1,
          },
        },
        axisTick: {
          show: true,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: '#fec87b',
        },
      },
    ],
    series: [
      {
        name: inName,
        type: 'line',
        symbol: 'image://svg/symbol-point.svg',
        symbolSize: 16,
        showSymbol: xData.length < 3,
        itemStyle: {
          color: inColor,
        },
        smooth: true,
        data: inData,
      },
      {
        name: inFName,
        type: 'line',
        symbol: 'image://svg/symbol-point.svg',
        symbolSize: 16,
        showSymbol: xData.length < 3,
        itemStyle: {
          color: inColor,
        },
        lineStyle: {
          type: 'dashed',
        },
        smooth: true,
        data: inFData,
      },
      {
        name: outName,
        type: 'line',
        symbol: 'image://svg/symbol-point.svg',
        symbolSize: 16,
        showSymbol: xData.length < 3,
        itemStyle: {
          color: outColor,
        },
        smooth: true,
        data: outData,
        markLine: {
          ...currentTimeMarkLine,
          label: {
            show: true,
            color: isWhite ? '#555' : '#fff',
            formatter(params) {
              return xData[params.value].slice(0, 16);
            },
            distance: [0, 200],
          },
        },
      },
      {
        name: outFName,
        type: 'line',
        symbol: 'image://svg/symbol-point.svg',
        symbolSize: 16,
        showSymbol: xData.length < 3,
        itemStyle: {
          color: outColor,
        },
        lineStyle: {
          type: 'dashed',
        },
        smooth: true,
        data: outFData,
      },
      {
        yAxisIndex: 1,
        xAxisIndex: 1,
        name: historyWlName,
        type: 'line',
        symbol: 'image://svg/symbol-point.svg',
        symbolSize: 16,
        showSymbol: xData.length < 3,
        itemStyle: {
          color: wlColor,
        },
        smooth: true,
        data: historyWl,
        markPoint: {
          data: [
            {
              coord: [currentIndex, historyWl[currentIndex]],
            },
          ],
          symbol: 'triangle',
          symbolRotate: 180,
          symbolSize: 18,
          symbolOffset: [0, -9],
          label: {
            position: 'right',
            fontSize: 12,
            color: wlColor,
            formatter() {
              return `调度开始水位：${historyWl[currentIndex]}m`;
            },
          },
        },
      },
      {
        yAxisIndex: 1,
        xAxisIndex: 1,
        name: featureWlName,
        type: 'line',
        symbol: 'image://svg/symbol-point.svg',
        symbolSize: 16,
        showSymbol: xData.length < 3,
        itemStyle: {
          color: wlColor,
        },
        lineStyle: {
          type: 'dashed',
        },
        smooth: true,
        data: featureWl,
        markLine: currentTimeMarkLine,
      },
      {
        yAxisIndex: 2,
        xAxisIndex: 2,
        name: historyRainName,
        type: 'bar',
        barMaxWidth: '30%',
        itemStyle: {
          color: historyRainColor,
          borderRadius: 4,
        },
        data: historyRain,
      },
      {
        yAxisIndex: 2,
        xAxisIndex: 2,
        name: featureRainName,
        type: 'bar',
        barMaxWidth: '30%',
        barGap: '-100%',
        itemStyle: {
          color: featureRainColor,
          borderRadius: 4,
        },
        data: featureRain,
        markLine: currentTimeMarkLine,
      },
      ...wlTzSeries,
    ],
  };
}
